<template>
    <div>
        <button @click="num--">-</button>
        <input type="text" size="3" v-model="num">
        <button @click="num++">+</button>

        <br>
        <button @click="sub">-</button>
        <input type="text" size="3" v-model="num">
        <button @click="add">+</button>

        <br>
        <button @click="sub(1,$event)">-</button>
        <input type="text" size="3" v-model="num">
        <button @click="add(0)">+</button>

        <br>
        <!--事件冒泡-->
        <!--
                <div @click="one()" id="box1">
                    <div @click.stop="two()" id="box2">
                        <button @click.stop="three()">button</button>
                    </div>
                </div>
        -->
        <!--本身触发，不阻止冒泡，要阻止冒泡可以在self后面加.stop-->
        <!--
                <div @click="one()" id="box1">
                    <div @click.self="two()" id="box2">
                        <button @click="three()">button</button>
                    </div>
                </div>
        -->
        <!--捕获事件，改变了冒泡的顺序，先捕获的先输出-->
        <!--
                <div @click.capture="one()" id="box1">
                    <div @click.capture="two()" id="box2">
                        <button @click="three()">button</button>
                    </div>
                </div>
        -->
        <br>
        <!--阻止原有的事件，只响应vue中的事件,事件只触发一次,第2次点击就不生效了，回归原事件-->
        <a href="http://www.baidu.com" @click.prevent.once="demo()">baidu</a>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                num: 0
            }
        },
        methods: {
            add(a) {
                console.log(a);
                this.num++;
            },
            sub(s, e) {
                console.log(s);
                console.log(e);
                this.num--;
            },
            one() {
                console.log('111');
            },
            two() {
                console.log('222');
            },
            three() {
                console.log('333');
            },
            demo() {
                console.log('aaa');
            }
        }
    }
</script>

<style scoped>
    #box1 {
        width: 300px;
        height: 300px;
        background: greenyellow;
    }

    #box2 {
        width: 150px;
        height: 150px;
        background: aqua;
    }
</style>